<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1000">
    <div class="article-content">
      <h2>{{ formData.title }}</h2>
      <el-divider v-if="formData.content.length > 0" border-style="dashed" style="margin:0px;" />
      <div class="article-meta-center">
        <div class="article-meta">
          <el-space :size="30">
            <p class="article-sm">发布时间：{{ moment(formData.createTime).format('YYYY-MM-DD HH:mm:ss') }}</p>
            <div class="font-size-control">
              <span>字体大小：</span>
              <el-space>[<a size="small" link @click="changeFontSize('large')">大</a>
                <a size="small" link @click="changeFontSize('medium')">中</a>
                <a size="small" link @click="changeFontSize('small')">小</a>]</el-space>
            </div>
          </el-space>
        </div>
      </div>
      <div class="content-box" :class="fontSize" v-html="formData.content"></div>
      <p v-for="(file, index) in formData.files" :key="index">
        附件{{ index + 1 }}：
        <a :href="file.url" target="_blank">{{ file.name }}</a>
      </p>
    </div>

  </Dialog>
</template>
<script lang="ts" setup>
import { CommonStatusEnum } from '@/utils/constants'
import * as NoticeApi from '@/api/system/notice'
import moment from 'moment';
defineOptions({ name: 'SystemNoticeFormPreview' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  title: '',
  type: undefined,
  content: '',
  files: [],
  status: CommonStatusEnum.ENABLE,
  remark: ''
})
const fontSize = ref('medium') // 默认中等字体大小
/** 改变字体大小 */
const changeFontSize = (size: string) => {
  fontSize.value = size
}

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = '公告详情'
  formLoading.value = true
  try {
    const data = await NoticeApi.getNotice(id)
    formData.value = { ...data }
  } catch (e) {
    message.error('获取公告详情失败')
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style lang="scss" scoped>
.article-meta-center {
  display: flex;
  justify-content: center;
  // margin: 30px 0;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.font-size-control {
  display: flex;
  align-items: center;

  span {
    font-size: 0.8rem;
    color: #666;
    margin-right: 8px;
  }

  .el-button {
    padding: 0 8px;
    min-height: 24px;
  }
}

.content-box {
  line-height: normal !important;

  &.small {
    font-size: 12px;
  }

  &.medium {
    font-size: 14px;
  }

  &.large {
    font-size: 16px;
  }
}

.article-content h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  // padding-bottom: 20px;
  text-align: center;
  line-height: 40px;
}

.content-box {
  line-height: normal !important;
}

.article-sm {
  font-size: 0.8rem;
  color: #666;
  display: flex;
  justify-content: center;
  margin: 30px 0;
}
</style>